import { set } from 'mobx';
import React, { Component, useState } from 'react';
import { FlatList, ActivityIndicator, Text, View, StyleSheet } from 'react-native';

class LoadMore2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isRefreshing: false,
      data: [
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        'New Item',
        
      ],
      page: 1,
      isFetchingMore: false,
    };
  }

  _onRefresh = () => {
    this.setState({ isRefreshing: true, page: 1, data: [] });
    // 模拟网络请求
    setTimeout(() => {
      this.setState({
        data: [...this.state.data, 'New Item'],
        isRefreshing: false,
      });
    }, 2000);
  };

  _onEndReached = () => {
    if (!this.state.isFetchingMore) {
      this.setState({ isFetchingMore: true });
      // 模拟网络请求
      setTimeout(() => {
        this.setState({
          data: [...this.state.data, `Item ${this.state.page}`],
          page: this.state.page + 1,
          isFetchingMore: false,
        });
      }, 2000);
    }
  };

  render() {
    return (
      <FlatList
        data={this.state.data}
        refreshing={this.state.isRefreshing}
        onRefresh={this._onRefresh}
        onEndReached={this._onEndReached}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <View style={{height: 100}}><Text>{item}</Text></View>}
        ListFooterComponent={() =>
          this.state.isFetchingMore && <View>
            <Text>加载中</Text><ActivityIndicator />
          </View>
        }
      />
    );
  }
}

// const LoadList = ()=> {
//   const [data, setData] = useState([]);
//   const [isRefreshing, setIsRefreshing] = useState(false);
//   const [page, setPage] = useState(1);
//   const [isFetchingMore, setIsFetchingMore] = useState(false);
//   const _onRefresh = () => {
//     setData([]);
//     setPage(1);
//     setIsRefreshing(true);
//     // 模拟网络请求
//     setTimeout(() => {
//       setData([...data, `New Item`]);
//       setIsFetchingMore(false);
//     }, 2000);
//   };

//   const _onEndReached = () => {
//     if (!isFetchingMore) {
//       setIsFetchingMore(true)
//       // 模拟网络请求
//       setTimeout(() => {
//         setData([...data, `Item ${page}`]);
//         setPage(page + 1);
//         setIsFetchingMore(false);
//       }, 2000);
//     }
//   };
//   return (
//     <FlatList
//       data={data}
//       refreshing={isRefreshing}
//       onRefresh={_onRefresh}
//       onEndReached={_onEndReached}
//       keyExtractor={(item, index) => index.toString()}
//       renderItem={({ item }) => <Text>{item}</Text>}
//       ListFooterComponent={() =>
//         isFetchingMore && <ActivityIndicator />
//       }
//     />
//   );
// };
export default LoadMore2;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
});
